<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">课程信息</div>
    <div class="container">
      <div class="row">
        <div class="content wow zoomIn">
          <div class="content-block">
            <div class="avatar">
              <img :src="item.image">
            </div>
            <h2 class="mainBox">
              {{ item.name }}
              <small>/ {{ item.typeName }}</small>
            </h2>
            <div v-html="item.desc"></div>
          </div>
        </div>
      </div>
      <div class="courseList">
        <h2>课程安排</h2>
        <Table height="500" :columns="columns1" :data="list">
          <template slot-scope="{ row }" slot="action">
            <Button v-if="!row.isOrder" type="primary" size="small" style="margin-right: 5px" @click="postMemberCourse(row.id,row.coachId)">预约</Button>
            <Button v-else size="small" style="margin-right: 5px">已预约</Button>
          </template>
        </Table>
      </div>
      <div style="margin: 20px 0;">
        <Page :total="total" size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="sizeChange"/>
      </div>
      <div class="courseList">
        <h2>课程评价</h2>
        <Table height="500" :columns="evaluateColumns" :data="evaluateList">
        </Table>
      </div>
      <div style="margin: 20px 0;">
        <Page :total="evaluateTotal" size="small" show-elevator show-sizer @on-change="evaluatePageChange" @on-page-size-change="evaluateSizeChange"/>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { getCourseDetailApi, getProgrammeListApi, postMemberCourseApi, getEvaluateApi, memberEvaluateApi } from '@/api/api';
export default {
  name: "ServiceDetail",
  data() {
    return {
      evaluateColumns: [
      {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '课程名称',
          key: 'courseName'
        },
        {
          title: '教练',
          key: 'coachName'
        },
        {
          title: '会员',
          key: 'memberName'
        },
        {
          title: '评价内容',
          key:
            'content'
        },
        {
          title: '评分',
          key:
            'score'
        },
      ],
      columns1: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '课程名称',
          key: 'courseName'
        },
        {
          title: '教练名称',
          key: 'coachName'
        },
        {
          title: '上课日期',
          key:
            'time'
        },
        {
          title: '上课时间',
          key:
            'type'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      list: [],
      id: null,
      item: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: '',
        courseId: ''
      },
      total: 0,
      evaluateTotal: 0,
      evaluateList: [],
      queryEvaluate: {
        pageNum: 1,
        pageSize: 10,
        courseId: ''
      },
      userObj: null
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.userObj = this.$store.state.user.userObj;
    if(this.userObj.type == 3) {
      this.columns1.pop()
    }
    this.getCoachDetail();
    this.getEvaluate();
  },
  mounted() {
    var top = document.getElementById(this.id).offsetTop;
    $(window).scrollTop(top + 300);
    $("#myNav").affix({
      offset: {
        top: 300
      }
    });
    var wow = new WOW();
    wow.init();
  },
  methods: {
    getEvaluate() {
      this.queryEvaluate.courseId = this.id;
      getEvaluateApi(this.queryEvaluate).then(res => {
        this.evaluateList = res.data.rows;
        this.evaluateTotal = res.total;
      })
    },
    // 课程预约
    postMemberCourse(id,coachId) {
      postMemberCourseApi({ id,coachCourseId: coachId }).then(res => {
        this.$Message.success('预约成功')
        this.getProgrammeList();
      })
    },
    // 课程详情
    getCoachDetail() {
      getCourseDetailApi(this.id).then(res => {
        this.item = res.data;
        this.queryParams.courseId = this.item.id;
        this.getProgrammeList();
      })
    },
    // 课程一览
    getProgrammeList() {
      getProgrammeListApi(this.queryParams).then(res => {
        this.list = res.data.rows;
        this.total = res.total;
      })
    },
    evaluateSizeChange(e) {
      this.queryEvaluate.pageSize = e;
      this.getEvaluate();
    },
    evaluatePageChange(e) {
      this.queryEvaluate.pageNum = e;
      this.getEvaluate();
    },
    pageChange(e) {
      this.queryParams.pageNum = e;
      this.getProgrammeList();
    },
    sizeChange(e) {
      this.queryParams.pageSize = e;
      this.getProgrammeList();
    },
  },
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.content-block {
  margin: 50px 0;
}

.content-block>h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.avatar {
  display: inline-block;
  margin-right: 20px;
}

.avatar img {
  width: 200px;
  height: 200px;
}

.courseList {
  margin: 10px 0;
}
</style>
